<template>
  <!-- 热门推荐 -->
  <div class="hot">
    <div class="hot-a">
      <img src="../assets/Hot/9.jpg" alt="">
    </div>
    <div class="hot-b">
      <ul>
        <li><img src="../assets/Hot/1.jpg" alt=""></li>
        <li><img src="../assets/Hot/2.jpg" alt=""></li>
        <li><img src="../assets/Hot/3.jpg" alt=""></li>
        <li><img src="../assets/Hot/4.jpg" alt=""></li>
        <li><img src="../assets/Hot/5.jpg" alt=""></li>
        <li><img src="../assets/Hot/6.jpg" alt=""></li>
        <li><img src="../assets/Hot/7.jpg" alt=""></li>
        <li><img src="../assets/Hot/8.jpg" alt=""></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Hot",
  data: function() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.hot{
  width: 100%;
  height: 227px;
  // background-color: blue;
}
.hot-a{
   width:365px ;
  height: 35px;
margin: 0 auto;
margin-top: 10px;
}
.hot-a img{
  width: 100%;
}
.hot-b{
  width: 100%;
  height:185px;
  // background-color: pink;
}
.hot-b ul{
  width: 100%;
  height: 185px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.hot-b li{
  width: 25%;
  height: 85px;
}
.hot-b li img{
  width: 100%;
}
</style>